<template>
    <div>
        <div>
            <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft" />
        </div>
        <div style="margin-top: 30px;">
            <span class="p1">验证码登录</span><br>
            <span class="p2">未注册的手机号验证后自动注册</span>
        </div>
        <div style="margin-top:70px;position: relative;">
            <input type="text" v-model="tel" placeholder="请输入手机号" class="ipt1">
            <input type="text" v-model="code" placeholder="请输入验证码" class="ipt2">
            <button class="btn1" @click="getCode" v-show="flag"> 获取验证码 </button>
            <button class="btn1" v-show="!flag">{{ num }}秒后</button>
            <button class="btn2" @click="login">登录</button>
        </div>
        <div style="margin-top:180px ;margin-left: 142px;">
            <p style="color: darkgrey;">其他登录方式</p>
            <img src="../../../1.png" alt="" style="margin-left: -20px;" @click="pwd">
            <img src="../../../2.png" alt="" style="margin-left: 10px;">
            <img src="../../../OIP-C.jpg" alt="" width="41" height="41" style="margin-left: 10px;border-radius: 50%;"
                @click="face" />
        </div>
        <p style="font-size: 13px;color: darkgrey;margin-left: 30px;margin-top: 26px;"><input
                type="radio" />我已阅读并同意<span style="color: rgb(52,120,246);">《服务协议》</span>和<span
                style="color: rgb(52,120,246);">《个人信息保护指引》</span></p>
    </div>
</template>

<script lang="ts" setup>
import { inject, ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant';
import type { AxiosInstance } from 'axios';
const tel = ref('');
const code = ref('');
const onClickLeft = () => history.back();
const router = useRouter()
const pwd = () => {
    router.push('/register_two')
}
const face = () => {
    router.push('/face')
}

let flag = ref<Boolean>(true);
let num = ref<number>(60);
const axios: AxiosInstance = inject('$axios') as AxiosInstance;
const getCode = async () => {
    flag.value = false;
    let timer = setInterval(async () => {
        num.value--;
        if (num.value === 55) {
            showToast('已发送验证码');
            let res = await axios.get(`http://localhost:3000/code`, { params: { phone: tel.value } })
        }
        if (num.value == 0) {
            clearInterval(timer)
            num.value = 60
            flag.value = true
        }
    }, 1000)
}
const login = async () => {
    let obj = {
        phone: tel.value,
        code: code.value
    }
    let res = await axios.post(`http://localhost:3000/login`, obj)
    // console.log(res.data);
    if (res.data.code == 200) {
        showToast('注册成功');
    }
}
</script>

<style lang="scss" scoped>
.p1 {
    font-size: 30px;
    font-weight: 500;
    margin-left: 30px;
}

.p2 {
    font-size: 14px;
    color: #999;
    margin-left: 30px;
}

.ipt1 {
    width: 100%;
    height: 70px;
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-top: 1px solid rgb(204, 199, 199);
    font-size: 18px;
    padding-left: 20px;
}

.ipt2 {
    width: 100%;
    height: 70px;
    border-left: none;
    border-right: none;
    border-top: 1px solid rgb(204, 199, 199);
    border-bottom: 1px solid rgb(204, 199, 199);
    font-size: 18px;
    padding-left: 20px;
}

.btn1 {
    width: 120px;
    height: 35px;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(148, 144, 144);
    border-radius: 5px;
    position: absolute;
    top: 92px;
    right: 20px;
}

.btn2 {
    width: 300px;
    height: 50px;
    border: none;
    background-color: rgb(36, 153, 248);
    border-radius: 10px;
    color: white;
    margin-top: 30px;
    margin-left: 45px;
    font-size: 18px
}
</style>